<template>
	<view class="home-main">
		<uni-nav-bar class="head-nav" fixed :backgroundColor="headColor">
		    <view class="title">
				<text class="nav-item" :class="{active:show==1}" @tap="show=1">推荐</text>
				<text class="nav-item" :class="{active:show==2}" @tap="show=2">品牌</text>
			</view>
		    <view slot="left">
				<image class="icon icon-chat" src="../../static/icons/chat.png"></image>
			</view>
		    <view slot="right" class="head-nav-right">
				<navigator class="nav-search" url="/pages/buyCart/index">
				<image class="icon icon-search" src="../../static/icons/search.png"></image>
				</navigator>
				<navigator class="nav-cart" url="/pages/buyCart/index">
					<image class="icon icon-cart" src="../../static/icons/cart.png"></image>
				</navigator>
			</view>
		</uni-nav-bar>
		<view v-show="show==1" class="section-home">
			<view class="section-banner">
				 
				<swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="400">
					<swiper-item v-for="m in bannerList" :key="m.id">
						<view class="swiper-item">
							<image class="img" :src="m.img_url" mode="scaleToFill"></image>
						</view>
					</swiper-item>
					
				</swiper>
				<!-- 系列 -->
				<div class="section-series">
					<div class="common-title">
						<text class="title">品类推荐</text>
						<text class="more" @tap="seriesMore">更多></text>
					</div>
					<scroll-view class="scroll-series" scroll-x="true" >
						<view @tap="goSeries(item.id)" class="series-block" v-for="item in series" :key="item.id">
								<image class="image" :src="item.cover_img" mode=""></image>
								<div class="cname">{{item.cname}}</div>
								<div class="ename">{{item.ename}}</div>
						</view>
					</scroll-view>
				</div>
				<div class="section-hot">
					<div class="common-title">
						<text class="title">特色优选</text>
					</div>
					<swiper class="swiper" previous-margin="80rpx" next-margin="40rpx">
						<swiper-item class="hot-swiper-item" v-for="item in hotList" :key="item.id">
							<navigator :url="'/pages/kind/detail/index?productId='+item.id" class="swiper-item">
									<image class="image" :src="item.cover_img" mode=""></image>
									<div class="inner-card">
										<div class="info">
											<div class="gname">{{item.gname}}</div>
											<div class="sub-gname">{{item.detail_desc}}</div>
											<div class="dotts">
												<span class="dott" v-for="color in item.colors" :key="color" :style="{backgroundColor:color}"></span>
											</div>
											<div class="descr">{{item.descr}}</div>
										</div>
									</div>
									
							</navigator>
						</swiper-item>
					</swiper>
				</div>
			</view>
		</view>
		<view v-show="show==2" class="section-brand">
			<Brands :brandList="brandList"></Brands>
		</view>
		
	</view>
</template>
      
<script>
	import homeApi from '@/api/home'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import Brands from './brand/index.vue'
	import findApi from '@/api/find/index.js'
	export default {
		components: {uniNavBar,Brands},
		data(){
			return {
				bannerList: [],
				brandList:[],
				show: 1,
				series:[],
				hotList:[]
			}
		},
		created(){
			this.getBanners();
			this.getBrandList();
			this.getSeriesAll();
			this.getHotList();
		},
		methods:{
			async getBanners(){
				var {data} = await homeApi.bannerList({
					use:0
				});
				this.bannerList = data;
			},
			
			async getBrandList(){
				var {data} = await homeApi.brandList();
				this.brandList = data;
			},
			getSeriesAll(){
				findApi.seriesAll()
					.then(res=>{
						this.series = res.data
					})
			},
			goSeries(sId){
				//既然页面是PC端网页存在的问题，可针对其处理
				// #ifdef H5
					window.sId = sId;
				// #endif
				uni.reLaunch({
				    url: '../find/index?sId='+sId
				});
			},
			getHotList(){
				homeApi.hotList()
					.then(res=>{
						this.hotList = res.data;
					})
			},
			seriesMore(){
				uni.switchTab({
					url: '../find/index'
				})
			}
			
		},
		computed:{
			//如果选中的是第一个卡片，为透明色，选中第二个则为设定的颜色
			headColor(){
				return  this.show==1?'transparent': '#354E44';
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.home-main{
		.head-nav{
			background-color: $leju-base-color;
			background-color: transparent;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			border-bottom: none;
			::v-deep .uni-navbar--border{
					border-bottom: none;
			}
			.title{
				width: 100%;
				display: flex;
				justify-content: center;
				.nav-item{
					font-size: 32rpx;
					color: #fff;
					line-height: 45rpx;
					margin: 0 20rpx;
					padding-bottom: 12rpx;
					&.active{
						border-bottom: 2px solid #fff;
					}
				}
			}
			.icon{
				width: 36rpx;
				height: 36rpx;
				&.icon-chat{
					margin-left: 20rpx;
				}
				&.icon-search{
					margin-right: 40rpx;
				}
			}
			.head-nav-right{
				display: flex;
				justify-content: space-between;
				align-items: center;
				image,img{
					width: 36rpx;
					height: 36rpx;
				}
			}
			
		}
		.common-title{
			font-size: 32rpx;
			color: #3E3E3E;
			line-height: 44rpx;
			margin: 40rpx auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-weight: 600;
			}
			.more{
				font-size: 26rpx;
				color: #8C8C8C;
			}
		}
		.section-banner{
			width: 100%;
			height: 470rpx;
			.top-bar{
				width: 100%;
				height: 88rpx;
				background-color: green;
			}
			.swiper-banner{
				width: 100%;
				height: 470rpx;
				.swiper-item{
					width: 750rpx;
					height: 100%;
					.img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.section-series{
				width: 100%;
				.scroll-series{
					width: 100%;
					white-space: nowrap; 
					.series-block{
						display: inline-block;
						margin: 0 20rpx;
						width: 208rpx;
						.image{
							width: 208rpx;
							height: 176rpx;
						}
						.cname{
							font-size: 26rpx;
							line-height: 38rpx;
							color: #3E3E3E;
							text-align: center;
							margin-top: 20rpx;
							font-weight: 600;
						}
						.ename{
							font-size: 20rpx;
							color: #B0B0B0 ;
							line-height: 28rpx;
							text-align: center;
						}
					}
				}
			}
			.section-hot{
				margin-bottom: 200rpx;
				.swiper{
					width: 100%;
					height: 314rpx;
					.hot-swiper-item{
						position: relative;
						width: 590rpx;
						height: 314rpx;
						.image{
							position: absolute;
							left: 44rpx;
							top: 0;
							width: 194rpx;
							height: 280rpx;
							border-radius: 10rpx;
						}
						.inner-card{
							margin-top: 50rpx;
							width: 590rpx;
							height: 260rpx;
							background-color: #fff;
							border-radius: 20rpx;
							.info{
								width: 316rpx;
								height: 100%;
								box-sizing: border-box;
								padding: 36rpx;
								margin-left: 274rpx;
								.gname{
									font-size: 26rpx;
									line-height: 38rpx;
									font-weight: 600;
								}
								.sub-gname{
									white-space: nowrap;
									overflow: hidden;
									font-size: 18rpx;
									color: #B0B0B0 ;
									line-height: 36rpx;
								}
								.dotts{
									width: 100%;
									height: 40rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									.dott{
										width: 20rpx;
										height: 20rpx;
										border-radius: 50%;
										margin-right: 16rpx;
									}
								}
								.descr{
									font-size: 22rpx;
									line-height: 30rpx;
									margin-top: 12rpx;
									white-space: nowrap;
									overflow: hidden;
								}
							}
						}
						
						
					}
				}
				
			}
		}
		
		.section-brand{
			margin-top: 100rpx;
		}
	}
</style>
